<!--
 * @Author: weikang
 * @Description:
 * @Date: 2024-01-07 15:41:50
 * @LastEditTime: 2024-05-05 12:13:46
 * @FilePath: \env-manager-pc\src\views\update\file\edit.vue
-->
<script setup lang="ts">
import { ElOption, type FormInstance } from 'element-plus'
import { UpgradeMode, rules, useInitForm } from './page'
import { ModelType } from '@/types/common'
import type { ModelOpen } from '@/types/page'

const emits = defineEmits(['submit'])
const dialogVisible = ref(false)
const { formData, initForm } = useInitForm()
const formRef = ref<FormInstance>()
const btnLoading = ref(false)
const modelType = ref(ModelType.add)
function handleClose() {
  close()
}

function open(options: ModelOpen) {
  modelType.value = options.type
  if (options.data) {
    formData.value = { ...options.data }
  }
  dialogVisible.value = true
}

const title = computed(() => {
  return modelType.value === ModelType.add ? '创建方案' : '修改方案'
})

function doLoading(flag: boolean) {
  btnLoading.value = flag
}

function submit() {
  formRef.value?.validate((vaild) => {
    if (vaild) {
      emits('submit', formData.value, doLoading)
    }
  })
}

function close() {
  dialogVisible.value = false
  btnLoading.value = false
  initForm()
}

defineExpose({
  open,
  close,
})
</script>

<template>
  <el-dialog
    v-model="dialogVisible"
    append-to-body
    :title="title"
    width="60%"
    :before-close="handleClose"
  >
    <ElForm ref="formRef" :model="formData" label-width="180px" label-position="top" label-suffix="：" :rules="rules">
      <ElRow :gutter="30">
        <ElCol :span="12">
          <ElFormItem label="升级方案" prop="Name">
            <ElInput v-model="formData.Name" />
          </ElFormItem>
        </ElCol>
        <ElCol :span="12">
          <ElFormItem label="文件方式" prop="UpgradeMode">
            <ElSelect v-model="formData.UpgradeMode">
              <ElOption label="FTP" :value="UpgradeMode.FTP" />
              <ElOption label="HTTP" :value="UpgradeMode.HTTP" />
            </ElSelect>
          </ElFormItem>
        </ElCol>
        <ElCol :span="12">
          <ElFormItem label="升级文件URL" prop="Path">
            <ElInput v-model="formData.Path" />
          </ElFormItem>
        </ElCol>
        <ElCol :span="12">
          <ElFormItem label="版本号" prop="Ver">
            <ElInput v-model="formData.Ver" />
          </ElFormItem>
        </ElCol>
        <ElCol :span="12">
          <ElFormItem label="访问账号" prop="UserName">
            <ElInput v-model="formData.UserName" />
          </ElFormItem>
        </ElCol>
        <ElCol :span="12">
          <ElFormItem label="访问密码" prop="Password">
            <ElInput v-model="formData.Password" />
          </ElFormItem>
        </ElCol>
        <ElCol :span="12">
          <ElFormItem label="版本说明" prop="StateRemark">
            <ElInput v-model="formData.StateRemark" type="textarea" />
          </ElFormItem>
        </ElCol>
      </ElRow>
    </ElForm>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" :loading="btnLoading" @click="submit">
          确定
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>
